import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { queryPage, setState, queryCatePage } from './api';
import { ref } from 'vue';
import { z } from '#/adapter/form';

// 操作id
export const idKey = ref('storeId');
export const viewStoreId = ref('');
export const handleId = ref('');

// 表格表单数据
export const formOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'storeName',
      label: '微馆名称',
    },
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'position',
      label: '小区名',
    },
    {
      fieldName: 'state',
      label: '状态',
      component: 'Select',
      componentProps: {
        options: [
          { label: '已显示', value: 1 },
          { label: '已隐藏', value: 0 },
        ],
      },
    },
  ],
  wrapperClass: 'grid-cols-5',
};

// 表格数据
export const gridOptions: VxeTableGridOptions = {
  rowConfig: {
    height: 80,
  },
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    {
      title: '微馆LOGO',
      field: 'storeLogo',
      align: 'center',
      cellRender: {
        name: 'CellImageViewer',
        props: { width: '60px', height: '60px' },
      },
      width: 120,
    },
    { title: '微馆名称', field: 'storeName', align: 'left', width: 200 },
    { title: '小区名', field: 'position', align: 'left', width: 280 },
    { title: '详细地址', field: 'address', align: 'left' },
    { title: '微馆联系人', field: 'director', align: 'left', width: 120 },
    { title: '联系方式', field: 'tel', align: 'left', width: 120 },
    {
      title: '显示',
      field: 'state',
      visible: true,
      cellRender: {
        name: 'CellSwitch',
        props: {
          idKey: idKey.value,
          checkedValue: 1,
          changeQuery: setState,
        },
      },
      width: 120,
    },
    // { title: '排序', field: 'sortOrder', align: 'center', width: 100 },
    { title: '创建时间', field: 'createTime', align: 'left', width: 200 },
    { slots: { default: 'action' }, title: '操作', width: 160 },
  ],
  minHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await queryPage({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: idKey.value,
    label: '微馆id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入微馆名称',
      maxLength: 12,
      allowClear: true,
    },
    fieldName: 'storeName',
    label: '微馆名称',
    rules: 'required',
  },
  {
    component: 'ImageUpload',
    fieldName: 'storeLogo',
    help: 'LOGO建议尺寸400*400',
    label: '微馆LOGO',
    rules: z.string().min(1, { message: '请上传LOGO，建议尺寸400*400' }),
  },
  {
    component: 'ImageUpload',
    fieldName: 'shareImg',
    help: '小程序分享封面，建议比例5：4',
    label: '小程序分享封面',
    rules: z.string().min(1, { message: '小程序分享封面，建议比例5：4' }),
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入微馆所在小区名',
      allowClear: true,
    },
    fieldName: 'position',
    label: '小区名',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'coordinate',
    label: '小区位置',
    rules: z.string().min(1, { message: '请选择小区定位位置' }),
  },
  {
    component: 'Input',
    fieldName: 'lat',
    label: '小区定位',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    fieldName: 'lng',
    label: '小区定位',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Textarea',
    componentProps: {
      placeholder: '请输入微馆详细地址',
      allowClear: true,
    },
    fieldName: 'address',
    label: '详细地址',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入微馆联系人',
      allowClear: true,
    },
    fieldName: 'director',
    label: '微馆联系人',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入微馆联系方式',
      allowClear: true,
    },
    fieldName: 'tel',
    label: '联系方式',
    rules: 'required',
  },
  {
    component: 'TinymceEditor',
    fieldName: 'introduction',
    label: '微馆简介',
    rules: 'required',
  },
];

// 表格数据
export const cateGridOptions: VxeTableGridOptions = {
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    { title: '分类名称', align: 'left', field: 'className' },
    { title: '排序', align: 'center', field: 'seq', width: 80 },
    { title: '创建时间', field: 'createTime', width: 160 },
  ],
  height: 500,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await queryCatePage({
          page: page.currentPage,
          limit: page.pageSize,
          storeId: viewStoreId.value,
          ...formValues,
        });
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: false,
  },
};
